<template>
  <div>
    <!-- 顶部搜索 -->
    <div class="baseDiv">
      <div class="baseDivInner">
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          size="mini"
        >
          <el-form-item label="审批人">
            <el-input v-model="formInline.user" placeholder="审批人"></el-input>
          </el-form-item>
          <el-form-item label="活动区域">
            <el-select v-model="formInline.region" placeholder="活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="onSubmit">查询</el-button>
            <el-button type="primary" @click="handleCreate">新建</el-button>
            <el-button type="danger" @click="handleDelList">批量删除</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 数据列表 -->
    <div class="baseDiv" style="height: 640px">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        max-height="640"
        size="small"
      >
        <el-table-column type="selection" width="55" header-align="center" align="center"></el-table-column>

        <el-table-column label="序号" type="index" width="50" header-align="center" align="center"></el-table-column>

        <el-table-column label="日期" header-align="center" align="center">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>

        <el-table-column prop="name" label="姓名" header-align="center" align="center"></el-table-column>

        <el-table-column prop="address" label="地址" header-align="center" align="center" show-overflow-tooltip></el-table-column>

        <el-table-column label="操作" header-align="center" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="info" @click="handleView(scope.$index, scope.row)">查看</el-button>
            <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>

    <!-- 底部翻页 -->
    <div class="baseDiv">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      ></el-pagination>
    </div>

    <!-- 卡片 -->
    <card
      :visible="dialogVisible"
      :mode="dialogMode"
      :row-data="currentRow"
      @update:visible="dialogVisible = $event"
    ></card>
  </div>
</template>

<script>
import card from "@/views/basic/Card";

export default {
  components: {
    card,
  },
  data() {
    return {
      dialogVisible: false,
      dialogMode: "create",
      currentRow: null,
      formInline: {
        user: "",
        region: "",
      },
      currentPage: 1,
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      multipleSelection: []
    };
  },
  methods: {
    onSubmit() {
      this.$message({
          message: '恭喜你，这是一条成功消息',
          type: 'success'
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val);
    },
    handleView(index, row) {
      console.log(index, row);
      this.dialogMode = "view";
      this.currentRow = { ...row };
      this.dialogVisible = true;
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogMode = "edit";
      this.currentRow = { ...row };
      this.dialogVisible = true;
    },
    handleCreate(index, row) {
      console.log(index, row);
      this.dialogMode = "create";
      this.currentRow = {
        date: "", // 清空日期
        name: "", // 清空姓名
        address: "", // 清空地址
      };
      this.dialogVisible = true;
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleDelList(){
      if(this.multipleSelection.length === 0){
        this.$message({
          message: '请勾选数据行',
          type: 'warning'
        });
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style scoped>
.baseDiv {
  padding: 10px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 12px #ebedf0;
  /* margin-top: 12px; */
  margin-bottom: 12px;
  margin-left: 10px;
  margin-right: 10px;
}
.baseDivInner {
  position: relative;
  display: block;
  padding: 10px;
  color: #58727e;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  background-color: #fafafa;
  border-radius: 16px;
  margin-top: 5px;
  margin-bottom: 5px;
}
</style>
